<template>
  <view class="container">
    <!-- 游客提示 -->
    <view class="guest-tip" v-if="isGuest">
      <view class="tip-content">
        <text class="tip-title">游客浏览模式</text>
        <text class="tip-text">您当前处于游客模式，可以浏览预约时间，但需要登录后才能进行预约操作。</text>
        <button class="login-btn" @click="goToLogin">立即登录</button>
      </view>

    </view>

    <!-- 原始预约页面 -->
    <booking-page
      ref="bookingPage"
      @select-time-slot="handleSelectTimeSlot"
      @cancel-booking="handleCancelBooking"
      @open-booking-modal="handleOpenBookingModal"
      @submit-booking="handleSubmitBooking"
    />
  </view>
</template>

<script>
import BookingPage from './booking.vue'
import { checkLoginStatus, isGuestMode } from '../../config/auth-helper.js'

export default {
  components: {
    BookingPage
  },
  data() {
    return {
      isGuest: true
    }
  },
  onLoad() {
    this.checkGuestStatus()
  },
  onShow() {
    this.checkGuestStatus()
  },
  methods: {
    checkGuestStatus() {
      // 检查是否为游客模式
      this.isGuest = isGuestMode()
    },
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    // 处理选择时间段事件
    handleSelectTimeSlot(item) {
      if (this.isGuest) {
        uni.showModal({
          title: '需要登录',
          content: '预约功能需要登录后才能使用，是否前往登录？',
          confirmText: '去登录',
          cancelText: '继续浏览',
          success: (res) => {
            if (res.confirm) {
              this.goToLogin()
            }
          }
        })
        return
      }

      // 如果已登录，调用原始组件的方法
      this.$refs.bookingPage.selectTimeSlot(item)
    },

    // 处理取消预约事件
    handleCancelBooking(id) {
      if (!checkLoginStatus()) return
      this.$refs.bookingPage.cancelBooking(id)
    },

    // 处理打开预约模态框事件
    handleOpenBookingModal() {
      if (!checkLoginStatus()) return
      this.$refs.bookingPage.openBookingModal()
    },

    // 处理提交预约事件
    handleSubmitBooking() {
      if (!checkLoginStatus()) return
      this.$refs.bookingPage.submitBooking()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
}

.guest-tip {
  background-color: rgba(0, 184, 212, 0.1);
  border-radius: 8px;
  margin: 10px;
  padding: 15px;

  .tip-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tip-title {
    font-size: 16px;
    font-weight: bold;
    color: #00B8D4;
    margin-bottom: 8px;
  }

  .tip-text {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-bottom: 12px;
  }

  .login-btn {
    background-color: #00B8D4;
    color: #fff;
    font-size: 14px;
    padding: 6px 20px;
    border-radius: 20px;
    border: none;
  }
}
</style>
